<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#f3970d" activeStyle="color:#f3970d" :scrollable="false" :swierWidth="200" :list="list"
				@click="click"></u-tabs>
		</u-sticky>
		<view style="padding: 30rpx;">
			<view style="background-color: #ffffff;margin-bottom: 30rpx;padding: 20rpx;border-radius: 20rpx;"
				v-for="item in orderList" v-if="indexv==item.state">
				<view
					style="color: #8c8c8c; display: flex;justify-content: space-between;border-bottom: #d6d6d6 1rpx solid;padding: 20rpx;">
					<view>
						<text style="color: #000000;">{{item.username}} {{item.phone}}</text><br />
						<text style="font-size: 20rpx;">{{item.address}}</text>
					</view>
					<text style="font-size: 20rpx;width: 158rpx;">{{item.time}}</text>
				</view>
				<view style="padding: 20rpx;display: flex;justify-content: flex-start;align-items: center;">
					<image src="../../static/image/4.jpg" style="width: 150rpx;height: 150rpx;" mode="aspectFill">
					</image>
					<view style="margin: 0 20rpx;">
						<text>{{item.commodity}}</text><br />
						<text style="font-size: 30rpx;color: #edde4e;">消耗{{item.quantity}}积分</text>
					</view>
					<text style="font-size: 30rpx;color: #8c8c8c;">x{{item.integral}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待收货',
				}, {
					name: '已完成',
				}],
				orderList: [{
					state: 0,
					username: '刘芳',
					phone: '13666666661',
					address: '河北石家庄市长安区心悦街道11号',
					commodity: '米老鼠手机壳',
					quantity: 2,
					integral: 2,
					time: '2022-07-04'
				}, {
					state: 0,
					username: '刘芳',
					phone: '13666666661',
					address: '河北石家庄市长安区心悦街道11号',
					commodity: '米老鼠手机壳',
					quantity: 2,
					integral: 2,
					time: '2022-07-04'
				}, {
					state: 1,
					username: '刘芳',
					phone: '13666666661',
					address: '河北石家庄市长安区心悦街道11号',
					commodity: '米老鼠手机壳',
					quantity: 2,
					integral: 2,
					time: '2022-07-04'
				}],
				indexv: 0
			}
		},
		methods: {
			click(item) {
				this.indexv = item.index
			}
		}
	}
</script>

<style>
	page {
		background-color: #ececec;
	}
</style>
